<template>
  <div>
    <!-- <el-row class="box">
      <el-col
        :span="5"
        v-for="item in list"
        :key="item.Id"
        :offset="1 > 0 ? 2 : 0"
      >
        <el-card :body-style="{ padding: '0px' }">
          <el-popover
            placement="top-start"
            :title="'标题:' + item.Title"
            :width="200"
            trigger="hover"
            :content="'内容:' + item.Content"
          >
            <template #reference>
              <img :src="item.Pic" class="image" @click="discuss(item.Id)" />
            </template>
          </el-popover>
          <div style="padding: 14px">
            <div class="bottom">
              <time class="time">{{ item.CreateAt }}</time>
              {{ item.LikeCount }}{{ $t("Blog.like") }}
              <el-button type="text" class="button">{{
                $t("Blog.love")
              }}</el-button>
            </div>
          </div>
        </el-card>
        <br />
      </el-col>
    </el-row> -->

    <el-collapse accordion>
      <el-collapse-item v-for="item in list" :key="item.Id">
        <template #title>
          {{ item.CreateAt }}-----{{ item.Email }}-----{{ item.Title }}
        </template>
        <div style="float:left; clear: both;" align="center">
          <img :src="item.Pic" class="image" @click="discuss(item.Id)" />
        </div>
        <div align="left">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.Content }}
          </div>
      </el-collapse-item>
    </el-collapse>

    <el-drawer v-model="drawer" :with-header="false">
      <span>
        <div class="demo-drawer__footer">
          <el-input
            style="float: left; width: 79%"
            :placeholder="$t('Blog.leaveComment')"
            v-model="discussContent"
            autocomplete="off"
          /><el-button
            type="primary"
            @click="publish"
            style="float: right; width: 19%"
            >{{ $t("Blog.commit") }}</el-button
          >
        </div></span
      >
      <span>{{ $t("Blog.commentArea") }}</span>
      <div v-for="item in discussList" :key="item.Id">
        <el-divider content-position="left"
          >{{ item.CreateAt }}&nbsp;&nbsp;&nbsp;&nbsp;{{
            item.Email
          }}</el-divider
        >
        <span>{{ item.Content }}</span>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  async created() {
    await this.getHostList();
  },
  unmounted() {
    console.log("我离开了");
    stop();
  },
  computed: {
    ...mapGetters(["user"]),
  },
  data() {
    return {
      drawer: false,
      list: [],
      discussList: [],
      emailId: null,
      discussContent: "",
    };
  },
  methods: {
    async getHostList() {
      console.log(789);
      const res = await this.$api.blog.getHostList();
      if (!res.data) {
        this.$notify({
          title: "警告",
          message: "没有返回任何信息",
          type: "warning",
        });
      } else {
        console.log(res.data, "hhh");
        this.list = res.data;
      }
    },
    publish() {
      if (!this.user.userEmail) {
        this.$message.error("请先登录");
        this.$router.push({ name: "Login" });
        return;
      }
      this.$api.blog
        .writeDiscuss({
          BlogId: this.emailId,
          Email: this.user.userEmail,
          Content: this.discussContent,
        })
        .then((res) => {
          this.discussContent = "";
          this.discuss(this.emailId);
          this.$message.success("成功发表");
        });
    },
    discuss(blogId) {
      this.drawer = true;
      this.emailId = blogId;
      this.$api.blog.getDiscuss(blogId).then((res) => {
        this.discussList = res.data;
      });
    },
  },
};
</script>
<style scoped>
.time {
  font-size: 10px;
  color: #999;
}

.bottom {
  margin-top: 10px;
  line-height: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  height: 200px;
  display: block;
  object-fit: contain;
}
.box {
  display: flex;
  flex-flow: row wrap;
}
</style>